import React from "react";
import { connect } from 'react-redux';
import {fromJS} from 'immutable';
import { actionCreators } from '../store'
import { NovelDetailsWrap } from '../style';
import { Button, Tag } from 'antd-mobile';
import randomcolor from 'randomcolor';
class SearchBarExample extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: true,
            save: false
        };
        this.flag = false; //是否进入阅读模式s
    }
    render() {
        let i =  this.props.novelDetailsData ;
        let { _collectNoverById, _collectNoverByIdDe } = this.props;
        let id = this.props.match.params.id
        return (<NovelDetailsWrap>
            <div to={"/novelDetails/" + 1} className="listItem">
                <div className={"imgBox"}>
                    <img className="banner-img" alt="1" src={i.cover} />
                </div>
                <div className="listContent">
                    <p className="title"> {i.title}</p>
                    <p className="details">
                        <span  ><em>{i.author}</em> | {i.minorCate} | {i.wordCount}</span>
                    </p>
                    <p className="details">  <span >{i.updated}前更新</span>
                    </p>
                </div>
            </div>
            <div className={'btnWrap'}>
                {this.state.save ? <Button type="primary" size="small" onClick={() => _collectNoverByIdDe(id)}>已收藏</Button> : <Button type="primary" size="small" onClick={() => _collectNoverById(id)} >收藏</Button>}
                <Button type="primary" size="small"  >开始阅读</Button>
            </div>
            <div className={"stylesNumber"}>
                <p><span>追书人数</span><br />{i.latelyFollower}</p>
                <p><span>读者留存率</span><br />{i.retentionRatio}%</p>
                <p><span>日更新字数</span><br />{i.serializeWordCount}</p>
            </div>
            <div className={'stylesTags'}>
                {
                    i.tags ? i.tags.map((item, index) =>
                        <Tag style={{ background: randomcolor({ luminosity: 'dark' }), color: "#ffffff" }} key={index}>{item}</Tag>
                    ) : ""
                }
            </div>
            <div className={'stylesIntroduce'}>
                {i.longIntro}
            </div>
        </NovelDetailsWrap>);
    }
    componentDidMount() {
        let id = this.props.match.params.id
        console.log('this.props.match.params.id',this.props)
        let list = this.props.collectNoverByIdList;
        let hasId = false;
        for (let index = 0; index < list.length; index++) {
            const el = list[index];
            console.log(id, el._id, id === el._id)
            if (id === el._id) {
                this.props._changenovelDetailsData(el);
                hasId = true
                break;
            }
        }
        if (!hasId) {
            this.props._getNovelById(id)
        }
    }
    componentWillReceiveProps(nextProps) {
        let id = nextProps.match.params.id;
        let isCollet = nextProps.collectNoverById.indexOf(id) > -1 ? true : false;
        console.log(1213, 'isCollet', nextProps.collectNoverById, id, isCollet)
        this.setState({ loading: false, save: isCollet });
    }
}
const mapStateToProps = (state, ownProps) => {
    state= fromJS(state);
    return {
        novelDetailsData: state.getIn(["novel", "novelDetailsData"]).toJS(),
        collectNoverById: state.getIn(["novel", "collectNoverById"]).toJS(),
        collectNoverByIdList: state.getIn(["novel", "collectNoverByIdList"]).toJS(),
    };
};
const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        _getNovelById(val) {
            dispatch(actionCreators._getNovelById(val))
        },
        _collectNoverById(val) {
            dispatch(actionCreators.collectNoverById(val))
        },
        _collectNoverByIdDe(val) {
            dispatch(actionCreators.collectNoverByIdDe(val))
        },
        _changenovelDetailsData(val) {
            dispatch(actionCreators.changenovelDetailsData(val))
        }
    };
};
export default connect(mapStateToProps, mapDispatchToProps)(SearchBarExample);
